<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="284"
    height="42"
    viewBox="0 0 284 42"
    fill="none"
  >
    <path
      fill="url(#linear_fill_0_201_1)"
      d="M6 2L280.538 2C281.346 2 282 2.65435 282 3.46154L282 3.46154C282 23.6412 265.641 40 245.462 40L6 40C3.79086 40 2 38.2091 2 36L2 6C2 3.79086 3.79086 2 6 2Z"
    ></path>
    <path
      fill-rule="evenodd"
      fill="url(#linear_border_0_201_0)"
      d="M280.538 0L6 0C2.68629 0 0 2.68629 0 6L0 36C0 39.3137 2.68629 42 6 42L245.462 42C266.746 42 284 24.7457 284 3.46154C284 1.54978 282.45 0 280.538 0ZM280.538 2L6 2C3.79086 2 2 3.79086 2 6L2 36C2 38.2091 3.79086 40 6 40L245.462 40C265.641 40 282 23.6412 282 3.46154C282 2.65435 281.346 2 280.538 2Z"
    ></path>
    <defs>
      <linearGradient id="linear_fill_0_201_1" x1="7.870513916015625" y1="21" x2="282" y2="21" gradientUnits="userSpaceOnUse">
        <stop offset="0" :stop-color="color" />
        <stop offset="0.0972" :stop-color="color" stop-opacity="0.93" />
        <stop offset="0.7587273504145577" :stop-color="color" stop-opacity="0.47" />
        <stop offset="1" :stop-color="color" stop-opacity="0" />
      </linearGradient>
      <linearGradient id="linear_border_0_201_0" x1="2" y1="21" x2="282" y2="21" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#FFFFFF" />
        <stop offset="1" stop-color="#FFFFFF" stop-opacity="0.24" />
      </linearGradient>
    </defs>
  </svg>
</template>
<script setup lang="ts">
defineProps({
  color: {
    type: String,
    required: false,
    default: "#537FFE"
  },
  color2: {
    type: String,
    required: false,
    default: "#5AA6FF"
  }
});
</script>
